﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<style>
    .icon-box {
        width: 400px;
        height: 400px;
        border: 1px solid #eee;
        display: flex;
        flex-wrap: wrap;
        overflow-y: scroll;
        margin-top: 10px;
    }

    .me-box {
        display: flex;
    }

    .me-icon, .show-icon i {
        font-size: 27px;
        color: #3a3ae7;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">图标</label>

                                <div class="col-sm-3">
                                    <div class="me-box">
                                        <input type="text" class="form-control icon-input" name="icon" placeholder="请选择图标" value="{$info.icon}" readonly>
                                        <span class="show-icon" style="margin-left: 10px"><i class="iconfont {$info.icon}"></i></span>
                                    </div>
                                    <div class="icon-box">
                                        <div class="iconfont me-icon icon-huifu" onclick="chooseIcon('icon-huifu')"></div>
                                        <div class="iconfont me-icon icon-kaoshizuoda" onclick="chooseIcon('icon-kaoshizuoda')"></div>
                                        <div class="iconfont me-icon icon-tool-bar-shutdown" onclick="chooseIcon('icon-tool-bar-shutdown')"></div>
                                        <div class="iconfont me-icon icon-zhongqi" onclick="chooseIcon('icon-zhongqi')"></div>
                                        <div class="iconfont me-icon icon-zhongxinhuida" onclick="chooseIcon('icon-zhongxinhuida')"></div>
                                        <div class="iconfont me-icon icon-zhuxiaodenglu" onclick="chooseIcon('icon-zhuxiaodenglu')"></div>
                                        <div class="iconfont me-icon icon-folder" onclick="chooseIcon('icon-folder')"></div>
                                        <div class="iconfont me-icon icon-change" onclick="chooseIcon('icon-change')"></div>
                                        <div class="iconfont me-icon icon-success" onclick="chooseIcon('icon-success')"></div>
                                        <div class="iconfont me-icon icon-refuse" onclick="chooseIcon('icon-refuse')"></div>
                                        <div class="iconfont me-icon icon-huiyuanqia" onclick="chooseIcon('icon-huiyuanqia')"></div>
                                        <div class="iconfont me-icon icon-8" onclick="chooseIcon('icon-8')"></div>
                                        <div class="iconfont me-icon icon-tubiao-zhexiantu" onclick="chooseIcon('icon-tubiao-zhexiantu')"></div>
                                        <div class="iconfont me-icon icon-tongjifenxi-changguitongji" onclick="chooseIcon('icon-tongjifenxi-changguitongji')"></div>
                                        <div class="iconfont me-icon icon-tongjifenxi-xiangmubiaogetongji" onclick="chooseIcon('icon-tongjifenxi-xiangmubiaogetongji')"></div>
                                        <div class="iconfont me-icon icon-tongji" onclick="chooseIcon('icon-tongji')"></div>
                                        <div class="iconfont me-icon icon-weixin" onclick="chooseIcon('icon-weixin')"></div>
                                        <div class="iconfont me-icon icon-teacher" onclick="chooseIcon('icon-teacher')"></div>
                                        <div class="iconfont me-icon icon-siren" onclick="chooseIcon('icon-siren')"></div>
                                        <div class="iconfont me-icon icon-news" onclick="chooseIcon('icon-news')"></div>
                                        <div class="iconfont me-icon icon-web" onclick="chooseIcon('icon-web')"></div>
                                        <div class="iconfont me-icon icon-source" onclick="chooseIcon('icon-source')"></div>
                                        <div class="iconfont me-icon icon-jigou" onclick="chooseIcon('icon-jigou')"></div>
                                        <div class="iconfont me-icon icon-close" onclick="chooseIcon('icon-close')"></div>
                                        <div class="iconfont me-icon icon-elipsis" onclick="chooseIcon('icon-elipsis')"></div>
                                        <div class="iconfont me-icon icon-table" onclick="chooseIcon('icon-table')"></div>
                                        <div class="iconfont me-icon icon-iconfontquxiaoshouquan" onclick="chooseIcon('icon-iconfontquxiaoshouquan')"></div>
                                        <div class="iconfont me-icon icon-trash" onclick="chooseIcon('icon-trash')"></div>
                                        <div class="iconfont me-icon icon-pencil-square" onclick="chooseIcon('icon-pencil-square')"></div>
                                        <div class="iconfont me-icon icon-users" onclick="chooseIcon('icon-users')"></div>
                                        <div class="iconfont me-icon icon-caozuo_disu" onclick="chooseIcon('icon-caozuo_disu')"></div>
                                        <div class="iconfont me-icon icon-eye" onclick="chooseIcon('icon-eye')"></div>
                                        <div class="iconfont me-icon icon-arrow-right" onclick="chooseIcon('icon-arrow-right')"></div>
                                        <div class="iconfont me-icon icon-arrow-left" onclick="chooseIcon('icon-arrow-left')"></div>
                                        <div class="iconfont me-icon icon-list" onclick="chooseIcon('icon-list')"></div>
                                        <div class="iconfont me-icon icon-trasho" onclick="chooseIcon('icon-trasho')"></div>
                                        <div class="iconfont me-icon icon-plus" onclick="chooseIcon('icon-plus')"></div>
                                        <div class="iconfont me-icon icon-edit" onclick="chooseIcon('icon-edit')"></div>
                                        <div class="iconfont me-icon icon-chevron_down" onclick="chooseIcon('icon-chevron_down')"></div>
                                        <div class="iconfont me-icon icon-chevron_up" onclick="chooseIcon('icon-chevron_up')"></div>
                                        <div class="iconfont me-icon icon-tasks" onclick="chooseIcon('icon-tasks')"></div>
                                        <div class="iconfont me-icon icon-bars" onclick="chooseIcon('icon-bars')"></div>
                                        <div class="iconfont me-icon icon-renzhengyonghu" onclick="chooseIcon('icon-renzhengyonghu')"></div>
                                        <div class="iconfont me-icon icon-24" onclick="chooseIcon('icon-24')"></div>
                                        <div class="iconfont me-icon icon-bianji" onclick="chooseIcon('icon-bianji')"></div>
                                        <div class="iconfont me-icon icon-31quanbushangpin" onclick="chooseIcon('icon-31quanbushangpin')"></div>
                                        <div class="iconfont me-icon icon-shouye" onclick="chooseIcon('icon-shouye')"></div>
                                        <div class="iconfont me-icon icon-shanchu" onclick="chooseIcon('icon-shanchu')"></div>
                                        <div class="iconfont me-icon icon-yonghu-yuan" onclick="chooseIcon('icon-yonghu-yuan')"></div>
                                        <div class="iconfont me-icon icon-liebiao" onclick="chooseIcon('icon-liebiao')"></div>
                                        <div class="iconfont me-icon icon-dingdan" onclick="chooseIcon('icon-dingdan')"></div>
                                        <div class="iconfont me-icon icon-yingxiaoshezhi" onclick="chooseIcon('icon-yingxiaoshezhi')"></div>
                                        <div class="iconfont me-icon icon-liebiaobianji" onclick="chooseIcon('icon-liebiaobianji')"></div>
                                        <div class="iconfont me-icon icon-yonghuzhuce" onclick="chooseIcon('icon-yonghuzhuce')"></div>
                                        <div class="iconfont me-icon icon-jiluliebiao" onclick="chooseIcon('icon-jiluliebiao')"></div>
                                        <div class="iconfont me-icon icon-xinzeng" onclick="chooseIcon('icon-xinzeng')"></div>
                                        <div class="iconfont me-icon icon-liebiao1" onclick="chooseIcon('icon-liebiao1')"></div>
                                        <div class="iconfont me-icon icon-yonghu" onclick="chooseIcon('icon-yonghu')"></div>
                                        <div class="iconfont me-icon icon-kefu" onclick="chooseIcon('icon-kefu')"></div>
                                        <div class="iconfont me-icon icon-yonghukaihu" onclick="chooseIcon('icon-yonghukaihu')"></div>
                                        <div class="iconfont me-icon icon-caidan" onclick="chooseIcon('icon-caidan')"></div>
                                        <div class="iconfont me-icon icon-yonghuguanli" onclick="chooseIcon('icon-yonghuguanli')"></div>
                                        <div class="iconfont me-icon icon-jurassic_log" onclick="chooseIcon('icon-jurassic_log')"></div>
                                        <div class="iconfont me-icon icon-kaquanyingxiao" onclick="chooseIcon('icon-kaquanyingxiao')"></div>
                                        <div class="iconfont me-icon icon-jieriyingxiao" onclick="chooseIcon('icon-jieriyingxiao')"></div>
                                        <div class="iconfont me-icon icon-yulan" onclick="chooseIcon('icon-yulan')"></div>
                                        <div class="iconfont me-icon icon-quanxianpeizhi" onclick="chooseIcon('icon-quanxianpeizhi')"></div>
                                        <div class="iconfont me-icon icon-banner" onclick="chooseIcon('icon-banner')"></div>
                                        <div class="iconfont me-icon icon-peizhi" onclick="chooseIcon('icon-peizhi')"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="name" placeholder="请输入名称" value="{$info.name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">标签</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="tags" placeholder="请输入标签" value="{$info.tags}">
                                    <span class="form-text m-b-none">多个标签使用逗号分隔</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">状态：</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="status" value="1" title="启用" {$info.status !=-1 ? 'checked' : ''}>
                                    <input type="radio" name="status" value="-1" title="禁用" {$info.status== -1 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">描述</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="desc" rows="8">{$info.desc}</textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}{include file="public/preview-img-mask" swiper-id="cropper-preview" /}{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    function chooseIcon(class_name) {
        $('.show-icon').html(`<i class="iconfont ${class_name}"></i>`);
        $('.icon-input').val(class_name)
    }

</script>{/block}
